import { VC, Component } from '@/VC-vue'
import './index.styl'
import lineChart from '@/components/charts/lineChart.vue'
import { parseTime } from '../../utils/common'
import { serchReportChart } from './../../services/control'
import { Toast } from 'mand-mobile'

@Component({
    components: { lineChart }
})
export default class Result extends VC {
    showDateStart: boolean = false
    showDateEnd: boolean = false
    startTime: any = '请选择'
    endTime: any = '请选择'
    chartData: any[] = []
    dateOpt: any = {
        // 最小日期
        min: new Date('2000-01-01'),
        // 最大日期
        max: new Date('2100-09-09'),
        // 当前日期
        current: new Date()
    }
    handleShowDate(type: string) {
        const key = type === 'start' ? 'showDateStart' : 'showDateEnd'
        this[key] = true
    }
    handleChooseTime(type: string, timeArray: any) {
        const year = timeArray[0].value
        let month = timeArray[1].value
        if (month < 10) {
            month = '0' + month
        }
        const time = new Date(year + '-' + month)
        const key = type === 'start' ? 'startTime' : 'endTime'
        this[key] = parseTime(time, '{y}-{m}')
    }

    _doSearch() {
        const params = {
            beginTime: this.startTime,
            endTime: this.endTime
        }
        if (this.startTime == '请选择' || this.endTime == '请选择') {
            Toast.failed('请先选择时间~')
            return
        }
        Toast.loading('搜索中...')
        serchReportChart(params).then(res => {
            this.chartData = []
            if (res.data) {
                Toast.hide()
                this.chartData = res.data
            } else {
                Toast.failed('暂无数据')
            }
        })
    }

    reset() {
        this.startTime = '请选择'
        this.endTime = '请选择'
        this.chartData = []
    }

    renderSearch() {
        return (
            <div class="search-result">
                <div class="search-task">
                    <div
                        class="task-r"
                        onclick={this.handleShowDate.bind(this, 'start')}
                    >
                        <span>开始时间：</span>
                        <span>{this.startTime}</span>
                        <md-icon name="arrow-down" size="small" />
                    </div>
                    <div
                        class="task-r"
                        onclick={this.handleShowDate.bind(this, 'end')}
                    >
                        <span>结束时间：</span>
                        <span>{this.endTime}</span>
                        <md-icon name="arrow-down" size="small" />
                    </div>
                    {/* picker */}
                    <md-date-picker
                        ref="datePicker"
                        type="custom"
                        custom-types={['yyyy', 'MM']}
                        v-model={this.showDateStart}
                        today-text="今天"
                        min-date={this.dateOpt.min}
                        max-date={this.dateOpt.max}
                        default-date={this.dateOpt.current}
                        onconfirm={this.handleChooseTime.bind(this, 'start')}
                    />
                    <md-date-picker
                        ref="datePicker"
                        type="custom"
                        custom-types={['yyyy', 'MM']}
                        v-model={this.showDateEnd}
                        today-text="今天"
                        min-date={this.dateOpt.min}
                        max-date={this.dateOpt.max}
                        default-date={this.dateOpt.current}
                        onconfirm={this.handleChooseTime.bind(this, 'end')}
                    />
                </div>
                <div class="search-btn">
                    <md-button
                        type="warning"
                        icon="refresh"
                        inline
                        size="small"
                        style="margin-right:20px"
                        onclick={this.reset}
                    >
                        重置
                    </md-button>
                    <md-button
                        onclick={this._doSearch}
                        type="primary"
                        icon="search"
                        inline
                        size="small"
                    >
                        搜索
                    </md-button>
                </div>
            </div>
        )
    }

    renderChart(title: string, data: any, index: number) {
        return (
            <div class="bar_main">
                <div class="bar_title">{title}</div>
                <lineChart id={`line${index}`} data={data} />
            </div>
        )
    }

    render() {
        return (
            <div class="result-container">
                {this.renderSearch()}
                <div class="scroll-main">
                    {this.chartData.map((res: any, index) => {
                        return this.renderChart(
                            res.ruleName,
                            res.taskResultReportDtos,
                            index
                        )
                    })}
                </div>
            </div>
        )
    }
}
